<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"/>
    <login></login>
  </div>
</template>

<script>
import {
  Tabbar,
  TabbarItem,
  Popup
} from 'vant';
import { mapActions, mapState } from 'vuex';
import Login from './components/Login.vue';

export default {
  name: 'Home',
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Popup.name]: Popup,
    Login
  },
  data() {
    return {
      active: 0,
      menu: [
        {
          title: '首页',
          path: '/',
          name: 'Index',
          normal: 'home_normal',
          active: 'home_active'
        },
        {
          title: '工作台',
          path: '/TranListNum',
          name: 'TranListNum',
          normal: 'bench_normal',
          active: 'bench_active'
        },
        {
          title: '我的企业',
          path: '/accountInquiry',
          name: 'AccountInquiry',
          normal: 'company_normal',
          active: 'company_active'
        }
      ]
    };
  },
  computed: {
    ...mapState({
      isLogin: (state) => state.isLogin
    })
  },
  methods: {
    ...mapActions(['changeLoginState', 'changeNeedLogin', 'saveRoute']),
    jumpTo(item, index) {
      console.log(index);
      const route = { name: item.name };
      if (!this.isLogin && index) {
        this.changeNeedLogin(true);
        this.saveRoute(route);
      } else {
        this.$router.push(route);
      }
      // if (!this.isLogin && index === 1) {
      //   this.changeNeedLogin(true);
      //   this.saveRoute(route);
      // } else {
      //   this.$router.push(route);
      // }
    }
  }
};
</script>

<style lang="less">
  @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    #app {
      /* ios < 11.2 */
      padding-left: constant(safe-area-inset-left);
      padding-top: constant(safe-area-inset-top);
      padding-right: constant(safe-area-inset-right);
      padding-bottom: constant(safe-area-inset-bottom);
      /* ios >= 11.2 */
      padding-left: env(safe-area-inset-left);
      padding-top: env(safe-area-inset-top);
      padding-right: env(safe-area-inset-right);
      padding-bottom: env(safe-area-inset-bottom);
    }

    @media screen and (orientation: portrait) {
      body {
        /* 防止页面被刘海遮住 */
        padding-top: constant(safe-area-inset-top);
      }
    }
    /* 横屏底下的查询 */
    @media screen and (orientation: landscape) {
      body {
        /* IOS 11支持*/
        padding-right: constant(safe-area-inset-right);
        padding-left: constant(safe-area-inset-left);
        /*IOS 11.2版本版本支持*/
        padding-right: env(safe-area-inset-right);
        padding-left: env(safe-area-inset-left);
      }
    }
  }

  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    font-size: 13PX;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    p{
      margin: 0.2rem 0;
    }
    .home_menu{
      .menu_icon {
        width: 1.375rem;
        height: 1.375rem;
        background-size: 1.375rem 1.375rem;
        display: inline-block;
        vertical-align: middle;
      }
      .home_normal {
        background-image: url('./assets/img/tabbar/home_un@2x.png');
        background-repeat: no-repeat;
      }
      .home_active{
        background-image: url('./assets/img/tabbar/home_se@2x.png');
        background-repeat: no-repeat;
      }
      .bench_normal {
        background-image: url('./assets/img/tabbar/work_un@2x.png');
        background-repeat: no-repeat;
      }
      .bench_active {
        background-image: url('./assets/img/tabbar/work_se@2x.png');
        background-repeat: no-repeat;
      }
      .company_normal {
        background-image: url('./assets/img/tabbar/mycom_un@2x.png');
        background-repeat: no-repeat;
      }
      .company_active {
        background-image: url('./assets/img/tabbar/mycom_se@2x.png');
        background-repeat: no-repeat;
      }
    }
  }

  #nav {
    padding: 30px;

    a {
      font-weight: bold;
      color: #2c3e50;

      &.router-link-exact-active {
        color: #42b983;
      }
    }
  }
</style>
